{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/system_set.css">
<style type="text/css">
	body{
		background-color: #f3f3f3;
	}
	input{
		width: 90%;
		height: 2.5rem;
		color:transparent;
		position: absolute;
		top:7.55rem;
		left:4.665%;

	}
	.input1{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:4.665%;
		background-color: #fff;
		border-right: 0;
		line-height: 2.5rem;
		font-size: 2rem;
		color: #000;
		text-align: center;
	}
	.input2{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:19.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input2{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:19.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input3{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:34.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input4{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:49.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input5{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:64.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input6{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:79.665%;
		background-color: #fff;
		border-right: 0;
	}
	.point{
		width: 0.4rem;
		height: .4rem;
		border-radius: 50%;
		display: inline-block;
		background-color: #000;
		position: absolute;
		top:1.15rem;
		left:44%;
		display: none;
	}
	.defeat{
	background-image: url(/Public/Images/front/front_img/icon-cuowu@3x.png);
	background-size: 2.2rem 2.2rem;
	width: 2.2rem;
	height: 2.2rem;
	position: absolute;
	display: block;
	top:1.0rem;
	left:30.7%;
}
.Popupdefeat
{
	width: 30.4%;
	height: 5.7rem;
	opacity: 0.8;
	background: #000000;
	border-radius: 0.5rem;
	display: none;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin:auto;
	z-index: 99;
}
.Popupdefeat p{
	width: 100%
	height:0.8rem;
	font-size: 0.5rem;
	color: #FFFFFF;
	letter-spacing: 0;
	display: block;
	position: absolute;
	text-align: center;
	top:4.0rem;
	left:18%;

}
</style>
{/block}
{block name="content"}


<!--原来有支付密码时-->

<!-- <div class="have_psw">
	<div class="title">
		
		<div class="return_icon"></div>
		<p><strong>设置支付密码</strong></p>
		<span class="forget">忘记密码</span>
	</div>
	<span class="psw_set">请输入原支付密码，完成身份验证</span>
	<span class="input1 inp" ><span class="point"></span></span>
	<span class="input2 inp" ><span class="point"></span> </span>
	<span class="input3 inp" ><span class="point"></span> </span>
	<span class="input4 inp" ><span class="point"></span> </span>
	<span class="input5 inp" ><span class="point"></span> </span>
	<span class="input6 inp" ><span class="point"></span> </span>
	<input type="tel" class="real" maxlength="6"  style= "background-color:transparent "></input>
	
</div> -->

<!--原来没有支付密码时-->
<div class="no_psw">
	<div class="title">
		
		<div class="return_icon"></div>
		<p><strong>设置支付密码</strong></p>
		
	</div>
	<span class="psw_set">请设置支付密码</span>
	<span class="input1 inpnew" ><span class="point"></span></span>
	<span class="input2 inpnew" ><span class="point"></span> </span>
	<span class="input3 inpnew" ><span class="point"></span> </span>
	<span class="input4 inpnew" ><span class="point"></span> </span>
	<span class="input5 inpnew" ><span class="point"></span> </span>
	<span class="input6 inpnew" ><span class="point"></span> </span>
	<input type="tel" class="real" id="psw_input" maxlength="6"  style= "background-color:transparent "></input>
	
</div>

<div class="Popupdefeat">
	<div class="defeat"></div>
	<p>原密码输入错误</p>
</div>
{/block}
{block name="js"}
{literal}
<script type="text/javascript">
$('.return_icon').on('click',function()
	{
		window.location.href = '/Index/account_safe'

	});
$('.forget').on('click',function()
	{
		window.location.href = '/Index/forget_pay_psw'

	});

$('.real').on('input',function(){
	var length = $('.real').val().length;
	
	console.log(length);

	for(var i=0;i<length;i++){
	$("span.inp").eq(i).find(".point").show();

	}
	for(var j=length;j<6;j++){
	$("span.inp").eq(j).find(".point").hide();

	}

	for(var i=0;i<length;i++){
	$("span.inpnew").eq(i).find(".point").show();

	}
	for(var j=length;j<6;j++){
	$("span.inpnew").eq(j).find(".point").hide();

	}
	//如果六位输满，则自动提交
	if(length==6){
		var x=2;
		//如果验证错误，弹框原密码错误
		if(x==1){
			$('.Popupdefeat').fadeIn(1500);
			$('.Popupdefeat').fadeOut(1500);
			setTimeout(function(){
				location.reload();
			},3000);
		}
		//如果验证正确
		else{
		 psw = document.getElementById('psw_input');
		 psw.value="";
		 setTimeout(function(){
		 	$('.point').hide();
		 	$('.psw_set').html('请确认支付密码');
		 },400);
		}
	}


});


</script>
{/literal}
{/block}